<template>
	<view class="">
		<view class="lottery_banner">
			<!-- 抽奖说明 -->
			<view class="lottery_notice">
				抽奖说明
			</view>
			<image src="../../static/image/mine/index/lotterybanner.png" mode=""></image>
			<view class="lottery_lucky">
				<image src="../../static/image/mine/index/lottery02.png" mode="widthFix"></image>
				<view class="lottery_began">
					<view class="lottery_box">
						<!-- <view :class="['lottery_one',autoflag1? 'lottery_one_q':'']"> -->
							<view class="lottery_one">
							<!-- <image v-for="(item, index) in imgsrc" :src="item.pic" mode=""></image> -->
								<swiper vertical="true" 
							:autoplay="autoflag1"
							disable-touch="true" 
							circular = "true"
							:interval="intervalnum1">
								<swiper-item  v-for="(item,index) in imgsrc" >
									<image :src="item.pic"  mode="">
								</swiper-item>
							</swiper>
						</view>
					</view>
					<view class="lottery_box">
						<!-- <view :class="['lottery_one',autoflag2? 'lottery_one_q':'']"> -->
						<view class="lottery_one">
							<!-- <image v-for="(item, index) in imgsrc" :src="item.pic" mode=""></image> -->
								<swiper vertical="true"
						:autoplay="autoflag2"
						disable-touch="true"
						circular = "true"
						:interval="intervalnum2">
							<swiper-item  v-for="(item,index) in imgsrc" >
								<image :src="item.pic"  mode=""></image>
							</swiper-item>
						</swiper>
						</view>
					</view>
					<view class="lottery_box">
						<!-- <view :class="['lottery_one',autoflag3? 'lottery_one_q':'']"> -->
							<view class="lottery_one">
							<!-- <image v-for="(item, index) in imgsrc" :src="item.pic" mode=""></image> -->
								<swiper vertical="true"
						:autoplay="autoflag3"
						disable-touch="true" 
						circular = "true"
						:interval="intervalnum3">
							<swiper-item  v-for="(item,index) in imgsrc" >
								<image :src="item.pic"  mode=""></image>
							</swiper-item>
						</swiper>
						</view>
					</view>
				</view>
				<view class="began" @tap="be">试试手气</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			autoflag1: false,
			autoflag2: false,
			autoflag3: false,
			intervalnum1: '',
			intervalnum2: '',
			intervalnum3: '',
			tab1: {
				// 第一列当前显示的图片
				id: 1,
				url: '../../static/image/mine/index/entrance01.png'
			},
			tab2: {
				// 第二列当前显示的图片
				id: 2,
				url: '../../static/image/mine/index/entrance02.png'
			},
			tab3: {
				// 第三列当前显示的图片
				id: 3,
				url: '../../static/image/mine/index/entrance03.png'
			},
			imgsrc: [
				{ pic: '../../static/image/mine/index/entrance01.png' },
				{ pic: '../../static/image/mine/index/entrance02.png' },
				{ pic: '../../static/image/mine/index/entrance03.png' },
				{ pic: '../../static/image/mine/index/entrance04.png' }
			],
			animationData1: {}, // 第一列动画
			animationData2: {}, // 第二列动画
			animationData3: {}, // 第三列动画
			resNum: [],
			drawId: 1,
			animation: {}
		};
	},
	onLoad() {
		this.animation = uni.createAnimation({
			transformOrigin: '50% 50%',
			duration: 1000,
			timingFunction: 'ease-in-out',
			delay: 0
		});
	},
	mounted() {},
	methods: {
		be() {
			// console.log(111);
			var qw = parseInt(Math.random()*(130-100+1)+100,10);
			var qwe = Math.floor(Math.random()*(150-100+1)+100);
			console.log(qw,qwe);
			this.intervalnum1 =qw;
			this.intervalnum2 =qwe;
			this.intervalnum3 =qwe;
			// 随即生成0-10之间的数，0-2：结果为1,3-5：结果为2,6-8：结果为3,8-10：不中奖
			let randomNum = Math.random() * 10;
			console.log(randomNum);
			randomNum = parseInt(randomNum, 10);
			console.log(randomNum);
			// 隐藏默认图片
			// this.setData({
			//   drawId: 2,
			//   resNum: [] // 将结果数组置为空
			// })
			this.sw(1, randomNum); // 第一个动画
			this.sw(2, randomNum); // 第二个动画
			this.sw(3, randomNum); // 第二个动画
			// this.ts(1)
			// this.ts(2)
			// this.ts(3)
			// this.rotate(1)
		},
		ts (line) {
			var _this = this;
			// this.animation.translateY(-this.imgsrc.length * 48).step();
			// this.animationData1 = this.animation.export();
			// 随即生成摇奖区滚动的总共时长，范围5000-6000
			let randomTotalTime = Math.random() * 1000 + 5000;
			randomTotalTime = parseInt(randomTotalTime, 10);
			// 随即生成每次循环间隔的时间,500-600之间的随机数
			let tempRandom = Math.random() * 300 + 250;
			tempRandom = parseInt(tempRandom, 10);
			let num = 0; // 设定计数标签，从0开始
			let count = 1; // 循环计数
			let loop = setInterval(() => {
				num++;
				count++;
				if (num > 2) {
				  // 如果计数标签大于2，置为0
				  num = 0;
				}
				if (count * tempRandom >= randomTotalTime) {
					// 到达预定的时间点，停止循环，将图片定位到显示区域中间位置
					if(line == 1) {
						_this.autoflag1 = false
					}else if(line == 2) {
						_this.autoflag2 = false
					}else {
						_this.autoflag3 = false
					}
					count = 0;
					clearInterval(loop); // 停止循环
					console.log(111);
				} else {
					if(line == 1) {
						_this.autoflag1 = true
					}else if(line == 2) {
						_this.autoflag2 = true
					}else {
						_this.autoflag3 = true
					}
				}
			}, tempRandom);
		},
		sw (line,resNum) {
			var _this = this;
			// this.animation.translateY(-this.imgsrc.length * 48).step();
			// this.animationData1 = this.animation.export();
			// 随即生成摇奖区滚动的总共时长，范围5000-6000
			let randomTotalTime = Math.random() * 1000 + 5000;
			randomTotalTime = parseInt(randomTotalTime, 10);

			// 随即生成每次循环间隔的时间,500-600之间的随机数
			let tempRandom = Math.random() * 300 + 250;
			tempRandom = parseInt(tempRandom, 10);
			let num = 0; // 设定计数标签，从0开始
			let count = 1; // 循环计数
			let loop = setInterval(() => {
				num++;
				count++;
				if (num > 2) {
				  // 如果计数标签大于2，置为0
				  num = 0;
				}
				if (count * tempRandom >= randomTotalTime) {
					// 到达预定的时间点，停止循环，将图片定位到显示区域中间位置
					if(line == 1) {
						_this.autoflag1 = false
					}else if(line == 2) {
						_this.autoflag2 = false
					}else {
						_this.autoflag3 = false
					}
					count = 0;

					if (resNum >= 0 && resNum < 3) {
					  num = 0;
					} else if (resNum >= 3 && resNum < 6) {
					  num = 1;
					} else if (resNum >= 6 && resNum < 9) {
					  num = 2;
					}
					clearInterval(loop); // 停止循环
					console.log(111);
				} else {
					if(line == 1) {
						_this.autoflag1 = true
					}else if(line == 2) {
						_this.autoflag2 = true
					}else {
						_this.autoflag3 = true
					}
				}
			}, tempRandom);
		},
		rotate(line) {
			var _this = this;
			this._this = true
			// this.animation.translateY(-this.imgsrc.length * 48).step();
			// this.animationData1 = this.animation.export();
			// 随即生成摇奖区滚动的总共时长，范围5000-6000
			let randomTotalTime = Math.random() * 1000 + 5000;
			randomTotalTime = parseInt(randomTotalTime, 10);

			// 随即生成每次循环间隔的时间,500-600之间的随机数
			let tempRandom = Math.random() * 300 + 250;
			tempRandom = parseInt(tempRandom, 10);
			let num = 0; // 设定计数标签，从0开始
			let count = 1; // 循环计数
			let loop = setInterval(() => {
			
				num++;
				count++;
				if (count * tempRandom >= randomTotalTime) {
					// 到达预定的时间点，停止循环，将图片定位到显示区域中间位置
					_this.animation.translateY(48).step({
						duration: 0
					});
					count = 0;
					clearInterval(loop); // 停止循环
					console.log(111);
				} else {
					_this.animation.translateY(-_this.imgsrc.length*48).step().translateY(0).step({
					  duration: 0,
					});
					_this.animationData1 = _this.animation.export();
				}
			}, tempRandom);
		}
	}
};
</script>

<style lang="less" scoped>
.lottery_banner {
	position: relative;
	image {
		width: 100%;
		height: 100vh;
	}
	.lottery_lucky {
		position: absolute;
		width: 100%;
		top: 100upx;
		left: 0;
		image {
			width: 100%;
		}
		.began {
			position: absolute;
			font-size:40upx;
			font-weight: bold;
			color: #FFFFFF;
			top: 645upx;
			left: 50%;
			transform: translate(-50%);
		}
	}
} 
.lottery_began {
	position: absolute;
	left: 50%;
	top: 350upx;
	transform: translate(-50%);
	width: 550upx;
	display: flex;
	justify-content: space-around;
	.lottery_box {
		width: 144upx;
		height: 144upx;
		overflow: hidden;
		flex-wrap: wrap;
	}
	.lottery_one {
		display: flex;
		flex-direction: column;
		image {
			width: 144upx;
			height: 144upx;
		}
	}
	.lottery_one_q {
		animation: trans 1s infinite;
	}
	@keyframes trans {
		0% {
			transform: translateY(0);
		}
		100%{
			transform: translateY(-190px);
		}
	}
}
.lottery_notice {
	position: absolute;
	top: 0;
	right: 30upx;
	width: 80upx;
	height: 110upx;
	border-bottom-left-radius: 40upx;
	border-bottom-right-radius: 40upx;
	background: linear-gradient(to bottom,#fff8d3 0%,#ffd328 100%);
	z-index: 9;
	font-size: 28upx;
	color: #333333;
	text-align: center;
	padding-top: 10upx;
	box-sizing: border-box;
}
</style>
